import React from 'react';
const scales=[0.25,0.5,0.75,1,1.25,1.5,2,3,4];
const menus=[
    {id:'new-tpl', name:'新建模板', icon:'fa fa-file'},
    {id:'open-tpl',name:'编辑模板',icon:'fa fa-folder-open'},
    {id:'save-tpl',name:'保存模板',icon:'fa fa-save'},
    {id:'tpl-db',name:'创建表',icon:'fa fa-save'},
    {id:'use-tpl',name:'选择模板',icon:'fa fa-folder-open'},
    {id:'open-db',name:'导出数据',icon:'fa fa-folder-open'},
    {id:'save-db',name:'导入数据',icon:'fa fa-folder-open'},
    {id:'database-conf',name:'数据源配置',icon:'fa fa-database'},
    {id:'file-conf',name:'文件属性',icon:'fa fa-bars'}
];
const usermenus=[
    {id:'user-config-btn',name:'设置',icon:'fa fa-cog'},
    {id:'user-signout-btn',name:'注销',icon:'fa fa-sign-out'}
];
const helpmenus=[
    {id:'help-info-btn',name:'了解详情',icon:'fa fa-book'},
    {id:'help-faq-btn',name:'获取帮助',icon:'fa fa-question'},
    {id:'help-comments-btn',name:'服务和支持',icon:'fa fa-comments'}
];

class Header extends React.Component {
    constructor(props){
        super(props)
        this.state={
            scale:1,
            username:'David.Chen'
        };
        if(props.callback!=undefined){
            this.callback=props.callback;
        }
        if(props.hooks!=undefined){
            this.initHooks(props.hooks);
        }
        this._changeScale=this._changeScale.bind(this);
        this._callbtnfn=this._callbtnfn.bind(this);
    }
    initHooks(hooks){
        let that=this;
        this.hooks=hooks;
    }
    render(){
        let that=this;
        // <h1 className="app-logo">True <b className="app-name">Numbers</b></h1>
        return (
            <header>
                
                <h1 style={{width:'auto'}} className="app-logo">中威<b className="app-name">data.true</b>大数据可视化采集分析及文件转换系统软件V1.0</h1>
                <div className="app-top-left app-toolbar" style={{display:'none'}}>
                    <div className="toolbar-item sheets-view-scale">
                        <span id="view-scale" className="view-scale-cont">{this.state.scale*100}%</span>
                        <i className="fa fa-caret-down"></i>
                        <div className="popup-warper scale-popup">
                            <ul className="popup-cont">
                                {
                                    scales.map(scale => {
                                        let cls='popup-item';
                                        if(scale==that.state.scale){
                                            cls += ' active';
                                        }
                                        return <li key={scale} className={cls} data-scale={scale} onClick={that._changeScale}>{scale*100}%</li>  
                                    })
                                }
                            </ul>
                        </div>
                    </div>
                    <span className="toolbar-item splitline">&nbsp;</span>
                    <span data-tips="撤销" className="toolbar-item undo disable">
                        <i className="fa fa-undo"></i>
                    </span>
                    <span data-tips="重做" className="toolbar-item redo disable">
                        <i className="fa fa-repeat"></i>
                    </span>
                </div>
                
                <div className="app-top-right app-toolbar">
                    <div className="toolbar-item user-info">
                        <span className="user-info-cont">菜单</span>
                        <i className="fa fa-angle-down"></i>
                        <div className="popup-warper">
                            <ul className="popup-cont">
                                {
                                    menus.map(menu => {
                                        return <li key={menu.id} className="popup-item" id={menu.id} onClick={that._callbtnfn}><i className={menu.icon}></i> {menu.name}</li>
                                    })
                                }
                            </ul>
                        </div>
                    </div>
                    <span className="toolbar-item splitline">&nbsp;</span>
                    <div className="toolbar-item user-info">
                        <span className="user-info-cont">{this.state.username}</span>
                        <i className="fa fa-angle-down"></i>
                        <div className="popup-warper">
                            <ul className="popup-cont">
                            {
                                usermenus.map(menu => {
                                    return <li key={menu.id} className="popup-item" id={menu.id} onClick={that._callbtnfn}><i className={menu.icon}></i> {menu.name}</li>
                                })
                            }
                            </ul>
                        </div>
                    </div>
				    <span className="toolbar-item splitline">&nbsp;</span>
                    <div className="toolbar-item system-info">
                        <i className="fa fa-question-circle fa-lg"></i>
                        <div className="popup-warper">
                            <ul className="popup-cont">
                            {
                                helpmenus.map(menu => {
                                    return <li key={menu.id} className="popup-item" id={menu.id} onClick={that._callbtnfn}><i className={menu.icon}></i> {menu.name}</li>
                                })
                            }
                            </ul>
                        </div>
                    </div>
                </div>
            </header>
        );
    }
    _changeScale(e){
        let scale = e.target.getAttribute('data-scale');
        this.setState({
            scale:parseFloat(scale)
        })
    }
    _callbtnfn(e){
        let evt=e.target.getAttribute('id');
        this.callback(evt);
    }
}
export default Header;